<template>
  <div class="container">
    <div class="head">
      <h2 v-html="articleDetail.title"></h2>
      <p class="info">
        <span>{{ timeFn(articleDetail.createTime) }}</span>
        <span>超级管理员</span>
        <i class="el-icon-view"></i>
        <span>{{ articleDetail.visits }}</span>
      </p>
    </div>

    <div class="bodytextfater">
      <!-- <hr size="5px" style=" border-style: dotted; align=center" /> -->
      <div v-html="articleDetail.articleBody" class="bodytext"></div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs' // ES 2015
export default {
  name: 'articlesPreview',
  props: {
    articleDetail: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 格式化时间
    timeFn (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped >
.bodytextfater {
  background-color: #f5f5f5;
  padding: 10px;
}

span {
  margin: 0 5px;
}
i {
  margin: 0 5px;
}
p {
  margin-left: 10px;
}
.head {
  border-bottom: 1px dashed #ccc;
}
</style>
